<template>
  <div class="popup-change" v-if="changeEventDialogVisible" :style="position">
    <div class="popup-head">
      <div>事件更新</div>
      <el-button size="small" @click="changeEventDialogVisible = false">关闭</el-button>
    </div>
    <table class="popup-table">
      <tr>
        <td>事件编号</td>
        <td>{{ changeEvents.事件编号 }}</td>
      </tr>
      <tr>
        <td>事件类型</td>
        <td>{{ changeEvents.事件类型 }}</td>
      </tr>
      <tr>
        <td>事件等级</td>
        <td>{{ changeEvents.事件等级 }}</td>
      </tr>
      <tr>
        <td>发生时间</td>
        <td>{{ changeEvents.发生时间 }}</td>
      </tr>
      <tr>
        <td>发生地点</td>
        <td>{{ changeEvents.发生地点 }}</td>
      </tr>
      <tr>
        <td>车牌号</td>
        <td>{{ changeEvents.车牌号 }}</td>
      </tr>
      <tr>
        <td>驾驶员</td>
        <td>{{ changeEvents.驾驶员 }}</td>
      </tr>
      <tr>
        <td>处理状态</td>
        <td>
          <select class="select" v-model="changeEvents.处理状态">
            <option value="0">待处理</option>
            <option value="1">处理中</option>
            <option value="2">已归档</option>
          </select>
        </td>
      </tr>
    </table>
    <div class="submit-update">
      <el-button type="primary" @click="changeEventAttr" size="small">更新</el-button>
    </div>
  </div>
</template>

<script setup>
import { useDialog } from '@/stores/dialogSwitch.js'
import { storeToRefs } from 'pinia'
import { useChangeEventPopup } from './Hooks/useChangeEventPopup.js'
import { useDialogEvents } from '@/stores/dialogEvents.js'
// 引入点击事件
import { changeEventAttr } from './Hooks/useChangeEventAttr'
const { changeEvents } = storeToRefs(useDialogEvents())
const { changeEventDialogVisible } = storeToRefs(useDialog())
const { position } = useChangeEventPopup()
</script>

<style scoped>
/* 2、设置popup样式 */
.popup-change {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 10px;
  position: absolute;
  z-index: 1000;
  max-width: 300px;
  /* max-height: 500px; */
  background: #fff;
}
.popup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 5px 5px;
  background: rgb(9, 126, 223);
  border: none;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.popup-head button {
  border: none;
  border-radius: 10px;
  background: orangered;
}
.popup-table {
  margin: 10px;
  text-align: center;
}
table,
td {
  border-collapse: collapse;
}
td {
  border: 1px solid rgb(125, 125, 125);
  padding: 5px;
}

.popup-table .select {
  border: none;
  border-radius: 3px;
}
.submit-update {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
</style>
